<template>
  <div class="container">
    <ActionBar
      @input-change="handleInputChange"
      @search-click="getUserList"
      @insert-click="handleInsertClick"
      @edit-click="handleEditClick"
      @delete-click="handleDeleteClick"
      @setting-permission-click="handleSettingPermissionClick"
    />
    <Table :tableData="userList" :loading="tableLoading" @selection-change="selectionChange" />
    <el-pagination
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageNumChange"
    ></el-pagination>
    <Diglog :title="title" :show.sync="dialogVisible" :data="user" @success="handleActionSuccess" />
    <UserPermissionDiglog
      :show.sync="userPermissionDialogVisible"
      :data="user"
      @success="handleActionSuccess"
    />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import Diglog from './components/Diglog'
import UserPermissionDiglog from './components/UserPermissionDiglog'
import UserService from '../../../service/user'
import { loadingType } from '../../../common/js/constant'

export default {
  data() {
    return {
      title: '',
      keyword: '',
      user: {},
      userList: [],
      dialogVisible: false,
      userPermissionDialogVisible: false
    }
  },
  methods: {
    // 获取用户列表
    getUserList() {
      const { keyword, pageNum, pageSize } = this
      const result = UserService.getUserListByKeyword(
        keyword,
        pageNum,
        pageSize
      ).then(res => {
        const { pageNum, total, list } = res.data
        this.pageNum = pageNum
        this.total = total
        this.userList = list
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理input改变事件
    handleInputChange(value) {
      this.keyword = value
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      this.title = '添加用户'
      this.user = null
      this.dialogVisible = true
    },
    // 处理编辑按钮点击事件
    handleEditClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.title = '编辑用户'
        let roleIds = []
        this.selection[0].roles.forEach(item => {
          if (item && item.roleId !== null) {
            roleIds.push(item.roleId)
          }
        })
        this.selection[0].roleIds = roleIds
        // 深拷贝user防止引用传递
        this.user = JSON.parse(JSON.stringify(this.selection[0]))
        this.dialogVisible = true
      }
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {
      if (this.selection.length < 1) {
        this.$confirm('请至少选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.$confirm('您确定删除该用户？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          let userIds = []
          this.selection.forEach(item => userIds.push(item.userId))
          UserService.deleteUsers(userIds).then(res => {
            // 提示
            this.$message.success(res.message)
            // 刷新Table
            this.getUserList()
          })
        })
      }
    },
    // 处理用户权限按钮点击事件
    handleSettingPermissionClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        // 深拷贝user防止引用传递
        this.user = JSON.parse(JSON.stringify(this.selection[0]))
        this.userPermissionDialogVisible = true
      }
    },
    // 处理操作成功事件
    handleActionSuccess(pageNum) {
      if (pageNum !== null) {
        this.pageNum = pageNum
      }
      this.getUserList()
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getUserList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getUserList()
    }
  },
  mounted() {
    this.getUserList()
  },
  components: {
    ActionBar,
    Table,
    Diglog,
    UserPermissionDiglog
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .pagination
    margin-top 20px
    text-align right
</style>
